<!--
 * @Descripttion: HN-SaaS管理系统
 * @version: 1.0.0
 * @Author: 侯建军
 * @Date: 2020-09-02 15:55:03
 * @LastEditors: 侯建军
 * @LastEditTime: 2020-09-11 11:11:20
-->
<template>
  <div id="container">
    <div class="login">
      <h2>XXXXXX 医院信息管理系统</h2>
      <el-form :model="login" ref="loginForm" label-width="70px">
        <el-form-item
          label="账号"
          prop="username"
          :rules="[{ required: true, message: '账号不可为空', trigger: 'blur' }]"
        >
          <el-input v-model="login.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
          :rules="[{ required: true, message: '密码不可为空', trigger: 'blur' }]"
        >
          <el-input type="password" v-model="login.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit()">登录</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 导入api
import {login} from "@/api/user.js"
import ShareData from '@/utils/localStorage.js'
export default {
  name: "",
  data() {
    return {
      login: {},
    };
  },
  methods: {
    onSubmit() {
      this.$refs["loginForm"].validate((valid) => {
        if (valid) {
          login(this.login).then(response=>{    
            console.log(response.data) 
            if(response.data.code==="0000"){
              ShareData.setToken(response.data.data.token);
              ShareData.setItem("admin",this.login.username)
              this.$router.push("/");
            }else{
              this.$message.error('用户名密码错误！');
            }
          });
          // api调用
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
#container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login {
  width: 380px;
  //   background-color: red;
  text-align: center;
  padding-right: 30px;
}
</style>